<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="queryParams.hotelId" clearable filterable placeholder="请选择">
                    <el-option v-for="item in hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供应商订单号" prop="orderCode">
                <el-input v-model="queryParams.orderCode" placeholder="请输入供应商订单号" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="渠道订单号" prop="eOrderCode">
                <el-input v-model="queryParams.eOrderCode" placeholder="请输入渠道订单号" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="订单状态" prop="orderStatus">
                <el-select v-model="queryParams.orderStatus" filterable placeholder="请选择">
                    <el-option value="" label="全部订单"></el-option>
                    <el-option value="0" label="未处理"></el-option>
                    <el-option value="1" label="已处理"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客人姓名" prop="names">
                <el-input v-model="queryParams.names" placeholder="请输入客人姓名" clearable />
            </el-form-item>
            <el-form-item label="来单日期" prop="orderReqDateRange">
                <el-date-picker v-model="queryParams.orderReqDateRange" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="入住日期" prop="startTime">
                <el-date-picker v-model="queryParams.startTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="离店日期" prop="endTime">
                <el-date-picker v-model="queryParams.endTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="处理时间" prop="handleTime">
                <el-date-picker v-model="queryParams.handleTime" type="datetimerange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrderQuery">搜索</el-button>
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="orderList" class="orderDataRowClass">
            <el-table-column label="编号" width="170px">
                <template slot-scope="scope">
                    <span v-if="scope.row.orderType === 1">{{ scope.row.orderCode }}</span>

                    <span v-if="scope.row.orderType === 2">
                        {{ scope.row.orderCancelCode }}
                        <br>
                        <span style="color: #b1b1b1;">{{ scope.row.orderCode }}</span>
                    </span>

                    <el-tag v-if="scope.row.orderStatus === 2" type="danger">拒单</el-tag>

                    <span v-if="scope.row.refundType">
                        <br>
                        <el-tag v-if="scope.row.refundType === 1" type="danger">提前离店</el-tag>
                        <el-tag v-if="scope.row.refundType === 2" type="danger">违约金</el-tag>
                        <el-tag v-if="scope.row.refundType === 3" type="danger">电话取消</el-tag>
                        <el-tag v-if="scope.row.refundType === 4" type="danger">赔付单</el-tag>
                        <el-tag v-if="scope.row.refundType === 5" type="danger">到店查无</el-tag>
                    </span>
                    <span v-if="scope.row.jzjPrice && scope.row.jzjPrice > 0">
                        <br>
                        <el-tag type="danger">有结转金</el-tag>
                    </span>

                    <!-- 正常订单,接收时间和操作时间对比 -->
                    <span
                        v-if="scope.row.parentId === null && (scope.row.orderStatus === 0 || scope.row.orderStatus === 1)">
                        <br>
                        <el-tag v-if="calculateTimeDifference(scope.row.createReqTime, scope.row.handleTime) >= 30"
                            type="danger">超时</el-tag>
                    </span>

                    <!-- 取消订单,先判断来单时间和取消时间是不是大于30,如果大于30验证30分钟之内有没有操作记录,没有视为超时,如果有视为正常 -->
                    <span v-if="scope.row.parentId === null && scope.row.orderStatus === 3 && scope.row.cancelReqTime">
                        <br>
                        <div v-if="calculateTimeDifference(scope.row.createReqTime, scope.row.cancelReqTime) >= 30">
                            <!-- 判断30分钟之内有没有操作记录 -->
                            <div v-if="!scope.row.handleTime">
                                <el-tag type="danger">超时</el-tag>
                            </div>

                            <div
                                v-if="scope.row.handleTime && calculateTimeDifference(scope.row.createReqTime, scope.row.handleTime) >= 30">
                                <el-tag type="danger">超时</el-tag>
                            </div>

                        </div>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="艺龙订单号" prop="eOrderCode" align="center" width="110px" />
            <el-table-column label="酒店ID" align="center" width="140px">
                <template slot-scope="scope">
                    悦游酒店ID：{{ scope.row.hotelId }}<br />宝商酒店ID：{{ scope.row.bsHotelId }}
                </template>
            </el-table-column>
            <el-table-column label="酒店 / 房型" align="center" width="220px">
                <template slot-scope="scope">
                    {{ scope.row.hotelName }} <br>
                    {{ scope.row.houseName }}<{{ scope.row.rpName }}> <el-tag id="jumpRoomStatusTag"
                            @click="jumpToRoomStatus(scope.row.hotelId)">房态</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="部门 / 电话" align="center">
                <template slot-scope="scope">
                    {{ scope.row.ywryName }} <br>
                    {{ scope.row.ywryPhoneNum }}
                </template>
            </el-table-column>
            <el-table-column label="间 / 夜数" align="center">
                <template slot-scope="scope">
                    {{ scope.row.fjsNum }}间 / {{ scope.row.dayNum }}夜<br>
                    <el-tag
                        v-if="scope.row.isCancelable === 'true' && scope.row.canBeCanceled === 'true'">30+阶梯</el-tag>
                    <el-tag
                        v-if="scope.row.isCancelable === 'false' && scope.row.canBeCanceled === 'true'">阶梯取消</el-tag>
                    <el-tag
                        v-if="scope.row.isCancelable === 'true' && scope.row.canBeCanceled === 'false'">30+不可</el-tag>
                    <el-tag
                        v-if="scope.row.isCancelable === 'false' && scope.row.canBeCanceled === 'false'">不可取消</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.orderType === 1">
                        <div style="margin-bottom: 5px;">
                            <el-tag v-if="scope.row.orderType === 1">新订</el-tag>
                        </div>
                        <div>
                            <el-tag v-if="scope.row.orderStatus === 0" type="info">待处理</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 1" type="success">已接受</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 2" type="danger">已拒绝</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 3" type="danger">已取消</el-tag>
                        </div>
                    </span>

                    <span v-if="scope.row.orderType === 2">
                        <div style="margin-bottom: 5px;">
                            <el-tag v-if="scope.row.orderType === 2" type="danger">取消</el-tag>
                        </div>
                        <div>
                            <el-tag v-if="scope.row.orderStatus === 0" type="info">待处理</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 1" type="success">已接受</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 2" type="danger">已拒绝</el-tag>
                        </div>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="发单状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isIssue === 0" type="info">未发单</el-tag>
                    <el-tag v-if="scope.row.isIssue === 1" type="success">已发单</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="客人姓名" prop="names">
                <template slot-scope="scope">
                    {{ scope.row.names }}({{ scope.row.rsNum }})人
                </template>
            </el-table-column>
            <el-table-column label="结算 / 采购总价">
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <div>
                            <span style="color: red;font-weight: bold;" v-if="scope.row.payHotelAmount">
                                ￥{{ scope.row.payHotelAmount }}
                            </span>
                            <span style="color: red;font-weight: bold;" v-else>
                                ￥{{ scope.row.baseAmountOriginal }}
                            </span>
                            <br />
                            ￥{{ scope.row.cgjOriginal }}
                        </div>
                        <div style="margin-left: 5px;">
                            <span v-if="scope.row.payHotelAmount">
                                <i class="el-icon-warning" style="color:red;font-size: 18px;"
                                    v-if="scope.row.cgjOriginal >= scope.row.payHotelAmount"></i>
                            </span>
                            <span v-else>
                                <i class="el-icon-warning" style="color:red;font-size: 18px;"
                                    v-if="scope.row.cgjOriginal >= scope.row.baseAmountOriginal"></i>
                            </span>
                        </div>
                    </div>
                </template>

            </el-table-column>

            <el-table-column label="入住 / 离店日期">
                <template slot-scope="scope">
                    {{ scope.row.startTime }} 至<br>
                    {{ scope.row.endTime }}({{ scope.row.dayNum }}夜)
                </template>
            </el-table-column>
            <el-table-column label="入库时间 / 操作时间" prop="createTime" width="135px">
                <template slot-scope="scope">
                    <div v-if="scope.row.createReqTime">
                        {{ formattedDate(scope.row.createReqTime) }}
                    </div>
                    <div v-if="scope.row.handleTime">
                        {{ formattedDate(scope.row.handleTime) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.orderType === 1" size="mini" type="text"
                        @click="orderHandle(1, scope.row)" :disabled="scope.row.orderStatus != 0">接受</el-button>
                    <el-button v-if="scope.row.orderType === 1" size="mini" type="text"
                        @click="orderHandle(2, scope.row)" :disabled="scope.row.orderStatus != 0">拒绝</el-button>

                    <el-button v-if="scope.row.orderType === 2" size="mini" type="text"
                        @click="updateOrderStatus(1, scope.row)" :disabled="scope.row.orderStatus != 0">接受</el-button>
                    <el-button v-if="scope.row.orderType === 2" size="mini" type="text"
                        @click="updateOrderStatus(2, scope.row)" :disabled="scope.row.orderStatus != 0">拒绝</el-button>
                    <br>
                    <el-button size="mini" type="text" @click="openIssue(scope.row)">发单</el-button>
                    <el-button size="mini" type="text" @click="openOrderDetails(scope.row)">详情</el-button>

                    <span v-if="scope.row.orderType === 1">
                        <br />
                        <el-button size="mini" type="text" @click="importRegister(scope.row)">导入登记表</el-button>
                    </span>

                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getOrderList" />

        <el-dialog title="发单信息" :visible.sync="issue.isShow" width="830px" append-to-body>
            <div id="side">
                <div id="top">
                    <span>安徽悦游网络科技有限公司</span>
                </div>
                <div id="orderInfo">
                    <span style="padding-left: 15px;">{{ dynamicOrderType(issue.data.orderType) }}</span>
                    <span style="padding-right: 15px;">订单号：{{ issue.data.orderCode }}</span>
                </div>

                <div class="rows1">
                    <div class="row1">客人姓名</div>
                    <div class="row1">入住/离店日期</div>
                    <div class="row1">房间类型</div>
                    <div class="row1">确认号</div>
                </div>
                <div class="rows2">
                    <div class="row2">{{ issue.data.names }}</div>
                    <div class="row2">{{ issue.data.startTime }} 至 {{ issue.data.endTime }}</div>
                    <div class="row2">{{ issue.data.houseName }}<{{ issue.data.rpName }}>
                    </div>
                    <div class="row2">{{ issue.data.orderCode }}</div>
                </div>

                <div class="rows3">
                    <div class="row3">入住天数</div>
                    <div class="row3">{{ issue.data.dayNum }}晚</div>
                </div>
                <div class="rows4">
                    <div class="row4">房间数量</div>
                    <div class="row4">{{ issue.data.fjsNum }}间</div>
                </div>
                <div class="rows5">
                    <div class="row5">房间单价</div>
                </div>
                <div class="rows6" v-for="(item, index) in issue.data.fjdj">
                    <div class="row6">{{ item.rpPriceDay }}</div>
                    <div class="row6">￥{{ item.rpPrice }}</div>
                </div>
                <div class="rows7">
                    <div class="row7">采购总价</div>
                    <div class="row7">￥{{ issue.data.cgjOriginal }}</div>
                </div>
                <div class="rows8">
                    备注：房费由悦游支付，押金、杂费客人自理，房价请对客人保密；房间请整晚保留，已预订请回复：确认
                </div>

                <div class="rows9">
                    <div class="row9">酒店名称：</div>
                    <div class="row9">{{ issue.hotelObj.hotelName }}</div>
                    <div class="row9">发送方：</div>
                    <div class="row9">安徽悦游网络科技有限公司</div>
                    <div class="row9">联系人电话：</div>
                    <div class="row9">{{ issue.hotelObj.lxdh }}</div>
                    <div class="row9">酒店电话：</div>
                    <div class="row9">{{ issue.hotelObj.hotelPhone }}</div>
                    <div class="row9">传真号：</div>
                    <div class="row9">{{ issue.hotelObj.jdcz }}</div>
                    <div class="row9">传真号：</div>
                    <div class="row9"></div>
                </div>

                <div class="rows10">
                    <span style="font-weight: bold;">订单日期：</span>
                    <span v-if="issue.data.createReqTime">{{ formattedDate(issue.data.createReqTime) }}</span>
                </div>
                <div class="rows11">
                    <el-button size="mini" type="text" @click="copyAndSend">复制并发送</el-button>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="订单详细信息" :visible.sync="orderDetails.isShow" width="1140px" append-to-body>
            <div class="orderDetailsTitle">
                填写内容
            </div>
            <div class="orderDetailsBody">
                <div style="width: 300px;margin-right: 100px;display: flex;flex-wrap: wrap;">
                    <div>
                        异常状态：
                    </div>
                    <div>
                        <el-select v-model="orderDetails.data.refundType" placeholder="请选择异常状态：" clearable>
                            <el-option v-for="dict in dict.type.order_refund_type" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </div>
                    <div style="margin-top: 10px;">
                        订单备注：
                    </div>
                    <div style="margin-top: 10px;">
                        <el-input type="textarea" v-model="orderDetails.data.orderRemark" />
                    </div>
                    <div style="margin-top: 10px;">采购总价：{{ orderDetails.data.cgjOriginal }}</div>
                </div>
                <div>
                    采购单价：
                </div>
                <div style="margin-top: -6px;">
                    <div v-for="(item, index) in orderDetails.data.fjdj" :key="index"
                        style="margin-bottom: 10px;display: flex;align-items: center;">
                        <div style="margin-right: 5px;">
                            {{ item.rpPriceDay }}
                        </div>
                        <div>
                            <el-input v-model="item.rpPrice"></el-input>
                        </div>
                    </div>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="postUpdateOrderPrice">确 定</el-button>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="orderDetailsTitle">
                操作日志
            </div>
            <el-table :data="orderDetails.data.orderLogList" style="width: 100%"
                :header-cell-style="{ background: '#eef5ff' }">
                <el-table-column prop="nickName" label="操作人">
                </el-table-column>
                <el-table-column prop="orderCode" label="订单号">
                </el-table-column>
                <el-table-column label="操作时间">
                    <template slot-scope="scope">
                        {{ formattedDate(scope.row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="logDescribe" label="操作内容">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { getOrderList, orderHandlePost, updateOrderStatusPost, postCopyAndSend, postUpdateOrderPrice } from "@/api/hotel/order";
import { getRpPriceAndHotelObj } from "@/api/hotel/rp";
import { getHotelListAll } from "@/api/hotel/hotel";
import { postImportRegister } from "@/api/hotel/orderRegister";

export default {
    name: 'Order',
    dicts: ['order_refund_type'],
    data() {
        return {
            showSearch: true,
            loading: false,
            orderTotal: 0,
            orderList: [],
            hotelListAll: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderCode: undefined
            },
            issue: {
                isShow: false,
                data: {

                },
                hotelObj: {

                }
            },
            orderDetails: {
                isShow: false,
                data: {

                }
            }
        }
    }, created() {
        this.getOrderList();
        this.getHotelListAll();
    }, methods: {
        // 获取所有酒店数据,用于酒店下拉框
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.hotelListAll = response.data;
            }
            );
        },
        getOrderList() {
            this.loading = true;
            getOrderList(this.addDateRange(this.queryParams)).then(response => {
                console.log(response);
                this.orderList = response.rows;
                this.orderTotal = response.total;
                this.loading = false;
            }
            );
        },
        handleOrderQuery() {
            this.getOrderList();
        },
        orderHandle(type, row) {
            orderHandlePost({ dataStr: row, type }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.getOrderList();
                }
            });
        },
        updateOrderStatus(type, row) {
            updateOrderStatusPost({ dataStr: row, type }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.getOrderList();
                }
            });
        },
        openIssue(row) {
            this.issue.data = row;
            // 这里要去后端查询该订单每日的采购价和酒店信息
            getRpPriceAndHotelObj(row).then((res) => {
                this.issue.data.fjdj = res.data.rpPrice;
                this.issue.hotelObj = res.data.hotelObj;
                this.issue.orderCode = res.data.orderCode;
                this.issue.hotelIssueConfig = res.data.hotelIssueConfig;
                this.issue.isShow = true;
            });
        },
        copyAndSend() {
            postCopyAndSend(this.issue.data).then((res) => {
                if (res.code === 200) {
                    // 订单号 + 订单类型
                    const ddh = this.issue.data.orderCode + ' (' + this.dynamicOrderType(this.issue.data.orderType) + ')';
                    // 酒店名称
                    const jdmc = this.issue.hotelObj.hotelName;
                    // 确认号
                    const qrh = this.issue.data.orderCode;
                    // 入住人
                    const rzr = this.issue.data.names;
                    // 住宿时间
                    const zssj = this.issue.data.startTime + ' 至 ' + this.issue.data.endTime + ' ' + this.issue.data.dayNum + '夜';
                    // 预定客房
                    const ydkf = this.issue.data.houseName + '<' + this.issue.data.rpName + '> ' + this.issue.data.fjsNum + '间';
                    // 房价
                    let fj = '';
                    for (let i = 0; i < this.issue.data.fjdj.length; i++) {
                        fj += this.issue.data.fjdj[i].rpPriceDay + '：￥' + this.issue.data.fjdj[i].rpPrice + '/夜' + '\n';
                    }
                    // 总房价
                    const zfj = this.issue.data.cgjOriginal;

                    let text;
                    if (this.issue.hotelIssueConfig) {
                        fj = fj.trimEnd();
                        text = this.issue.hotelIssueConfig;
                        text = text.replace("${ddh}", ddh).replace("${jdmc}", jdmc).replace("${qrh}", qrh).replace("${rzr}", rzr)
                            .replace("${zssj}", zssj).replace("${ydkf}", ydkf).replace("${fj}", fj).replace("${zfj}", zfj);
                    } else {
                        text = '订单号：' + ddh + '\n' +
                            jdmc + '\n' +
                            '确认号：' + qrh + '\n' +
                            '入住人：' + rzr + '\n' +
                            '住宿时间：' + zssj + '\n' +
                            '预定客房：' + ydkf + '\n' +
                            '房价：' + '\n' +
                            fj +
                            '共￥' + zfj + '\n' +
                            '（房费由悦游支付，押金、杂费客人自理，房价请对客人保密；房间请整晚保留，已预订请回复：确认）\n' +
                            'From：安徽悦游网络科技有限公司';
                    }

                    this.$copyText(text);
                    this.$modal.msgSuccess("操作成功");
                    this.getOrderList();
                    this.issue.isShow = false;
                }
            });
        },
        openOrderDetails(row) {
            // 这里要去后端查询订单详情
            getRpPriceAndHotelObj(row).then((res) => {
                console.log(row);
                // 设置为响应式数据
                this.$set(this.orderDetails.data, 'fjdj', res.data.rpPrice);
                this.orderDetails.data.cgjOriginal = row.cgjOriginal;
                this.orderDetails.data.orderLogList = res.data.orderLogList;
                this.$set(this.orderDetails.data, 'orderRemark', res.data.orderInfo.orderRemark);
                this.$set(this.orderDetails.data, 'refundType', res.data.orderInfo.refundType);
                if (row.parentId) {
                    this.orderDetails.data.orderId = row.parentId;
                } else {
                    this.orderDetails.data.orderId = row.orderId;
                }
                console.log(this.orderDetails);
                this.orderDetails.isShow = true;
            });
        },
        postUpdateOrderPrice() {
            postUpdateOrderPrice(this.orderDetails.data).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("修改成功");
                    this.getOrderList();
                    this.orderDetails.isShow = false;
                }
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            const orderCode = this.queryParams.orderCode;
            const eOrderCode = this.queryParams.eOrderCode;
            const orderReqDateRange = this.queryParams.orderReqDateRange;
            const startTime = this.queryParams.startTime;
            const endTime = this.queryParams.endTime;
            const handleTime = this.queryParams.handleTime;
            const hotelId = this.queryParams.hotelId;
            const names = this.queryParams.names;

            this.download('hotel/order/export', {
                orderCode, eOrderCode,
                orderReqDateRange, startTime, endTime, handleTime, hotelId, names
            }, `order_${new Date().getTime()}.xlsx`)
        },
        // 调整房态
        jumpToRoomStatus(hotelId) {
            this.$router.push({ path: '/hotel/RoomStatus', query: { hotelId: hotelId } });
        },
        calculateTimeDifference(start, end) {
            let endTime;
            if (end) {
                endTime = new Date(end);
            } else {
                endTime = new Date();
            }
            const startTime = new Date(start);
            const differenceMs = endTime - startTime;
            console.log(Math.floor(differenceMs / 1000 / 60));
            return Math.floor(differenceMs / 1000 / 60); // 返回绝对值以避免负数
        },
        importRegister(row) {
            let that = this;
            this.$modal.confirm('是否导入登记表？').then(function () {
                return postImportRegister(row);
            }).then((res) => {
                if (res.code === 200) {
                    that.$modal.msgSuccess("操作成功");
                    that.getOrderList();
                }
            })
        }
    },
    computed: {
        dynamicOrderStatus() {
            return function (status) {
                if (status === 0) {
                    return '待处理'
                } else if (status === 1) {
                    return '已接受'
                } else if (status === 2) {
                    return '已拒绝'
                } else if (status === 3) {
                    return '已取消'
                }
            };
        },
        formattedDate() {
            return function (date) {
                return date.replace(/T/g, ' ').trim();
            };
        },
        dynamicOrderType() {
            return function (type) {
                if (type === 1) {
                    return '新订'
                } else if (type === 2) {
                    return '取消'
                };
            }
        }
    }
}
</script>

<style>
.orderDataRowClass {
    font-size: 12px;
}

#side {
    width: 780px;
    border: 1px solid;
}

#top {
    height: 50px;
    background-color: #dddddd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

.baseAmountOriginal {
    color: red;
    font-weight: bold;
}

#orderInfo {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}


.rows1,
.rows2,
.rows4,
.rows6,
.rows7 {
    display: flex;
}

.rows3 {
    display: flex;
    margin-top: 10px;
}

.row1 {
    width: 195px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
}

.row2 {
    width: 195px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.row3 {
    width: 195px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.row3:first-child {
    font-weight: bold;
}

.row4 {
    width: 195px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.row4:first-child {
    font-weight: bold;
}

.row5 {
    width: 390px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
}

.row6,
.row7 {
    width: 195px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.row7:first-child {
    font-weight: bold;
}

.row7:last-child {
    font-weight: bold;
    color: red;
}

.rows8 {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.rows9 {
    height: 130px;
    background-color: #DDDDDD;
    display: flex;
    flex-wrap: wrap;
}

.row9 {
    padding-top: 10px;
}

.row9:nth-child(1),
.row9:nth-child(3),
.row9:nth-child(5),
.row9:nth-child(7),
.row9:nth-child(9),
.row9:nth-child(11) {
    width: 185px;
    font-weight: bold;
    padding-left: 30px;
}

.row9:nth-child(2),
.row9:nth-child(4),
.row9:nth-child(6),
.row9:nth-child(8),
.row9:nth-child(10),
.row9:nth-child(12) {
    width: 200px;
}

.rows10,
.rows11 {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 15px;
}

.orderDetailsTitle {
    font-weight: bold;
    margin-bottom: 15px;
}

.orderDetailsBody {
    display: flex;
    padding-left: 15px;
}

#jumpRoomStatusTag {
    cursor: pointer;
}
</style>